<template>
    <div class="root">
        <img src="../assets/opened_capsual.png" class="image" alt="">
        <div class="card-wrapper">
            <div class="cross-wrapper">
                <div class="cross-icon">
                    <van-icon @click="returnLast" name="close" size="20" color="#E4E4E4"/>
                </div>
            </div>
            <div class="title-wrapper">
                <div class="capsual-title">
                    <span>{{ capTitle }}</span>
                </div>
            </div>
            <div class="time-wrapper">
                <div class="capsual-time">
                    <span>{{ startTime }} - {{ endTime }}</span>
                </div>
            </div>
            <div class="audio-play">
                <audio src="/i/horse.ogg" class="audio"></audio>
                <div class="audio-pause">
                    <van-icon name="pause-circle-o" size="20" color="#5ccdc8"/>
                </div>
                <div class="audio-process"></div>
            </div>
            <div class="content-area">
                {{ capContent }}
            </div>
            <div class="pic-area">
                <div class="pic-one" v-show="picNum >= 1">
                    <el-image
                        style="width: 60px; height: 60px;"
                        :src="picList[0]"
                        :zoom-rate="1.2"
                        :preview-src-list="picList"
                        :initial-index="0"
                        fit="cover"
                    />
                </div>
                <div class="pic-two" v-show="picNum >= 2">
                    <el-image
                        style="width: 60px; height: 60px;"
                        :src="picList[1]"
                        :zoom-rate="1.2"
                        :preview-src-list="picList"
                        :initial-index="1"
                        fit="cover"
                    />                
                </div>
                <div class="pic-three" v-show="picNum >= 3">
                    <el-image
                        style="width: 60px; height: 60px;"
                        :src="picList[2]"
                        :zoom-rate="1.2"
                        :preview-src-list="picList"
                        :initial-index="2"
                        fit="cover"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref,reactive,watch } from 'vue';
import { useRoute,useRouter } from "vue-router";
import { getOpenedCapsualInfo, getFile } from '../request/api';
import { ElLoading } from 'element-plus';
interface Options {
    lock: boolean,
    text: string,
    background: string,
}
const options: Options = {
    lock: true,
    text: "Loading...",
    background: 'rgba(0,0,0,0.7)'
}
const router = useRouter();
const route = useRoute();
var capTitle = ref<string>("");
var startTime = ref<string>("xxxx-xx-xx");
var endTime = ref<string>("xxxx-xx-xx");
var capContent = ref<string>("");
var picNum = ref<number>(0);
var picList = reactive<any>([]);
var nowKey = ref<string>("");
const returnLast = () => {  //点叉号回到上一行
    router.go(-1);
}
const onMounted_dup = () => {
    let loading = ElLoading.service(options);
    nowKey.value = route.query.key as string;
    getOpenedCapsualInfo({key: nowKey.value}).then((res:any) => {
        console.log(res);
        capTitle.value = res.result.title;
        capContent.value = res.result.content;
        startTime.value = res.result.createdAt.slice(0,10);
        endTime.value = res.result.openTime.slice(0,10);
        picNum.value = res.result.picture.length;
        if (picList.length) picList.length = 0;  //将每次的图片清空
        for(let item of res.result.picture){
            getFile(item).then((res:any) => {
                console.log(res);
                let imgUrl = 'data:image/png;base64,' + window.btoa((new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')));
                picList.push(imgUrl);
            })
        }
        setTimeout(() => {  //延迟0.7秒，保证图片都完全加载出来
            loading.close();
        }, 700);
    })
}
watch(()=>route.query.key, (newval) => {
    if (newval && newval != nowKey.value) {
        onMounted_dup();
    }
})
onMounted(onMounted_dup);
</script>

<style lang="less">
    .root{
        height: 100%;
        background-color: #5ccdc8;
        .image{
            position: absolute;
            z-index: 1;
            width: 200px;
        }
        .card-wrapper{
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: white;
            box-shadow: 2px 2px 10px rgb(211, 203, 203);
            width: 85%;
            left: 7.5%;
            height: 82%;
            top: 95px;
            margin: 0 0 32px 0;
            border-radius: 18px;
            .cross-wrapper{
                display: flex;
                flex-direction: row-reverse;
                margin-top: 8px;
                margin-right: 10px;
            }
            .title-wrapper{
                display: flex;
                justify-content: center;
                margin-top: 10px;
                .capsual-title{
                    font-weight: 400;
                    font-size: 20px;
                }
            }
            .time-wrapper{
                display: flex;
                justify-content: center;
                margin-top: 8px;
                .capsual-time{
                    font-weight: 400;
                    font-size: 14px;
                    color: #9D9D9D;
                }
            }
            .audio-play{
                display: flex;
                margin-top: 10px;
                .audio{
                    height: 20px;
                    margin-left: 5.5px;
                }
                .audio-pause{
                    margin-left: 41px;
                }
                .audio-process{
                    height: 3px;
                    align-self: center;
                    width: 70%;
                    background-color: #e7f6f5;
                    border-radius: 50px;
                    margin-left: 4px;
                    margin-bottom: 3px;
                }
            }
            .content-area{
                height: 60%;
                margin: 5px 26px 5px 26px;
                color: #626262;
                padding-left: 10px;
                padding-right: 10px;
                line-height: 26.6px;
                font-weight: 400;
                font-size: 15px;
                letter-spacing: 2%;
                overflow: scroll;
            }
            .pic-area{
                display: flex;
                margin: 10px 36px;
                .pic-one{
                    width: 60px;
                    height: 60px;
                    background-color: #f7f8fa;
                    margin-right: 5px;
                }
                .pic-two{
                    width: 60px;
                    height: 60px;
                    background-color: #f7f8fa;
                    margin-right: 5px;
                }
                .pic-three{
                    width: 60px;
                    height: 60px;
                    background-color: #f7f8fa;
                }
            }
        }       
    }
</style>